<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS 伸缩布局综合示例</title>
  <style>
    /* 
        以下是 flex 布局常用属性说明（父元素上的属性）：
        2.flex-direction    调整主轴方向（默认为水平方向 ），子盒子如何在父盒子里面水平对齐方式 
        3.flex-wrap         控制是否换行，当我们子盒子内容宽度多于父盒子的时候如何处理 
        4.flex-flow         是 flex-direction、flex-wrap 的简写形式 
        5.justify-content   调整主轴对齐（水平对齐 ），子盒子如何在父盒子里面水平对齐方式 
        6.align-items       调整侧轴对齐（垂直对齐 ），子盒子如何在父盒子里面垂直对齐（单行） 
        7.align-content     由 flex-wrap 产生的独立行，多行垂直对齐方式 

        设置在子元素上的属性:
        1.flex: 1;         简写属性，1 代表每个伸缩项各占一份
                           flex 是 flex-grow、flex-shrink、flex-basis 的缩写 
                           flex: 1;  ==>  flex-grow:1; flex-shrink:1;  flex-basis:0%; 
        2.flex-grow        可以来扩展子元素的宽度，设置当前元素应该占据剩余空间的比例值 
        3.flex-shrink      定义收缩比例，通过设置的值来计算收缩空间（前提：子元素的宽度和超过父盒子的大小，并且没有设置... ）
        */
    .box {
      width: 500px;
      height: 300px;
      background-color: red;
      display: flex;
      /*align-items: stretch;/*默认值，让子元素的高度被拉伸以适应父容器（前提：子元素不设置高度） */
      /*align-items: center;/*垂直方向居中 */
      align-items: flex-start;/*垂直方向上对齐，上对齐 */
      /* align-items: flex-end; *//*垂直方向上对齐，下对齐 */

    }

    
    .box .item {
      flex:1;
      height: 100px;
      background-color: pink;
      border: 1px solid black;
    }



    
  </style>
</head>

<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>

  </div>
</body>
</html>